<template>
    <!--成绩管理 冯云威-->
    <section>
        <!--模糊查询-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.studentId" placeholder="请输入学生编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.studentName" placeholder="请输入学生姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getScores">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="scoreInfoAdd">录入成绩</el-button>
                </el-form-item>
            </el-form>

        </el-col>
        <!--成绩管理-->
        <el-table :data="tableData" border style="width: 100%" element-loading-text="拼命加载中" v-loading="listLoading">
            <el-table-column prop="studentId" label="学生编号" height="200px">
            </el-table-column>
            <el-table-column prop="studentName" label="姓名">
            </el-table-column>
            <el-table-column prop="courseName" label="所属课程">
            </el-table-column>
            <el-table-column prop="scorePlay" label="课件点播分数">
            </el-table-column>
            <el-table-column prop="scoreOntime" label="在线时间分数">
            </el-table-column>
            <el-table-column prop="scoreTest" label="章节测试分数">
            </el-table-column>
            <el-table-column prop="scoreExam" label="课程结业考试分数">
            </el-table-column>
            <el-table-column prop="score" sortable label="总成绩">
            </el-table-column>
            <el-table-column label="详情">
                <template scope="scope">
                    <el-button size="small" @click="handleMore(scope.$index, scope.row)" type="primary"
                               style="margin-top: 5px">查看
                    </el-button>
                    <el-tooltip class="item" effect="dark" :content="content[scope.$index]" placement="right-start">
                        <div style="float: left;margin-top: 5px;margin-right: 5px;">
                            <el-badge :is-dot="idDot[scope.$index]">
                                <el-button type="info" size="small" :disabled="disabled[scope.$index]"
                                           @click="scoreInfoEdit(scope.$index, scope.row) ">编辑
                                </el-button>
                            </el-badge>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

        </el-table>

        <!--分页组件 -->
        <el-col :span="24" class="toolbar">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
        <!--详情页面-->
        <el-dialog title="学生成绩详情页面" v-model="scoreDetailVisible" :close-on-click-modal="false">
            <el-form label-width="100px" :model="scoreDetail" ref="scoreDetail">

                <div style="overflow: auto; width: 100%;">
                    <table class="border-table">
                        <tr>
                            <td class="spec alt">学生编号：</td>
                            <td>{{scoreDetail.studentId}}</td>
                            <td class="alt">学生姓名:</td>
                            <td>{{scoreDetail.studentName}}</td>
                            <td class="alt">课件点播分数:</td>
                            <td>{{scoreDetail.scorePlay}}</td>
                        </tr>
                        <tr>
                            <td class="spec alt">在线时间分数：</td>
                            <td>{{scoreDetail.scoreOntime}}</td>
                            <td class="alt">章节测试分数：</td>
                            <td>{{scoreDetail.scoreTest}}</td>
                            <td class="alt">课程结业考试分数：</td>
                            <td>{{scoreDetail.scoreExam}}</td>
                        </tr>
                        <tr>
                            <td class="spec alt">总成绩：</td>
                            <td>{{scoreDetail.score}}</td>
                        </tr>
                    </table>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="scoreDetailVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <!--成绩修改页面-->
        <el-dialog title="学生成绩修改" v-model="stuUpdateVisible" :close-on-click-modal="false">
            <el-form ref="stuUpdate" :rules="stuUpdate" :model="stuUpdate" label-width="100px">
                <el-alert
                        :title="updateDissent.dissentContent"
                        type="info"
                        :closable="false"
                        show-icon>
                </el-alert>
                <br/>
                <el-form-item label="课件点播分数">
                    <el-input v-model="stuUpdate.scorePlay"></el-input>
                </el-form-item>
                <el-form-item label="在线时间分数">
                    <el-input v-model="stuUpdate.scoreOntime"></el-input>
                </el-form-item>
                <el-form-item label="章节测试分数">
                    <el-input v-model="stuUpdate.scoreTest"></el-input>
                </el-form-item>
                <el-form-item label="课程结业考试分数">
                    <el-input v-model="stuUpdate.scoreExam"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="stuUpdateRebut">异议驳回</el-button><!--stuUpdateVisible=false-->
                <el-button type="primary" @click.native="stuUpdateFromSubmit" :loading="editLoading">修改保存</el-button>
            </div>
        </el-dialog>
        <!--成绩录入页面-->
        <el-dialog title="学生成绩添加" v-model="stuAddVisible" :close-on-click-modal="false">
            <el-form ref="stuAdd" :model="stuAdd" :rules="stuAddRules" label-width="80px">
                <el-form-item label="学生编号" prop="studentId">
                    <el-input v-model="stuAdd.studentId"></el-input>
                </el-form-item>
                <el-form-item label="线下课程结业考试分数" prop="scoreExam">
                    <el-input v-model="stuAdd.scoreExam"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="stuAddVisible= false">取消</el-button>
                <el-button type="primary" @click.native="stuAddFromSubmit" :loading="editLoading">保存</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import {getScore, getScoreInfo, updateScore, addScore} from '../../api/api';
    import{getDissent, getDissentInfo, deleteDissent} from '../../api/api'
    export default {
        data() {
            return {
                studentId: '',
                tableData: [],
                total: 0,//列表总条数
                pageSize: 15,//每页条数
                currentPage: 1,//当前页码
                listLoading: false,
                editLoading: false,
                //编辑提示信息
                content: ['只有学生申请成绩异议时才可修改'],
                //badge小圆点,false为显示
                idDot: [],
                //false为可点，true为禁用
                disabled: [],
                //成绩异动的信息
                dissentDate: [],
                judgeFormVisible: true,
                filters: {
                    //学生编号
                    studentId: '',
                    //学生姓名
                    studentName: ''
                },
                scoreDetailVisible: false,
                scoreDetail: {
                    studentId: '',
                    studentName: '',
                    scorePlay: '',
                    scoreOntime: '',
                    scoreTest: '',
                    scoreExam: '',
                    score: ''
                },
                stuUpdateVisible: false,
                //异议信息
                updateDissent: {
                    dissentContent: '',
                    dissentId: ''
                },
                stuUpdate: {
                    stuScoreTip: '',
                    studentName: '',
                    courseName: '',
                    scorePlay: '',
                    scoreOntime: '',
                    scoreTest: '',
                    scoreExam: ''
                },
                stuAddVisible: false,
                stuAddRules: {
                    studentId: [{required: true, message: '学生编号不能为空', trigger: 'blur'}],
                    scoreExam: [{required: true, message: '结业成绩不能为空', trigger: 'blur'}]
                },
                stuAdd: {
                    studentId: '',
                    scoreExam: ''
                }

            }
        },
        methods: {
            handleClick() {
               /* console.log(1);*/
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getScores();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getScores();
            },
            //所有学生的成绩
            getScores() {
                let para = {
                    studentId: this.filters.studentId,
                    studentName: this.filters.studentName,
                    pageSize: this.pageSize,
                    pageNum: this.currentPage
                };
                this.listLoading = true;

                let para2 = {};
                getDissent(para2).then((res) => {
                    this.dissentDate = res.resData;
                    /*console.log(this.dissentDate[0].studentId);*/
                });

                getScore(para).then((res) => {
                    this.total = res.resData.total;

                    this.tableData = res.resData.list;
                    this.listLoading = false;
                   /* console.log(this.tableData[0].courseId);*/
                    //NProgress.done();

                    for (var j = 0; j < this.tableData.length; j++) {
                        this.idDot.splice(j, 1, false);
                         this.disabled.splice(j, 1, true);
                         this.content.splice(j, 1, "不能编辑，只有学生申请成绩异议时才可修改");

                        for (var a = 0; a < this.dissentDate.length; a++) {
                            if (this.dissentDate[a].studentId == this.tableData[j].studentId) {
                                this.content.splice(j, 1, "请查看该学生申请的成绩异议");
                                this.idDot.splice(j, 1, true);
                                this.disabled.splice(j, 1, false);
                            } else {

                            }
                        }

                    }
                });

            },
            //成绩详情页面
            handleMore: function (index, row) {
               /* console.log(row.scoreId);*/
                this.scoreId = row.scoreId;
                let para = {
                    scoreId: this.scoreId
                };

                getScoreInfo(para).then((res) => {
                    this.scoreDetail = res.resData;
                });
                this.scoreDetailVisible = true;
            },
            //修改成绩信息
            scoreInfoEdit: function (index, row) {

                this.scoreId = row.scoreId;
                let para = {
                    scoreId: this.scoreId
                };
                getScoreInfo(para).then((res) => {
                    this.stuUpdate = res.resData;
                });

                //获取成绩异议信息
                this.studentId = row.studentId;
                this.courseId = row.courseId;
                let para2 = {
                    studentId: this.studentId,
                    courseId: this.courseId
                };
                getDissentInfo(para2).then((res) => {
                    this.updateDissent = res.resData;
                    /*  alert(this.updateDissent);*/
                });
                this.stuUpdateVisible = true;
            },
            //添加成绩信息
            scoreInfoAdd: function (index, row) {
                this.stuAddVisible = true;
            },
            //修改提交页面
            stuUpdateFromSubmit: function () {
                this.$refs.stuUpdate.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = {};
                            para.scorePlay = this.stuUpdate.scorePlay;
                            para.scoreExam = this.stuUpdate.scoreExam;
                            para.scoreOntime = this.stuUpdate.scoreOntime;
                            para.scoreTest = this.stuUpdate.scoreTest;
                            para.modifyDate = new Date();
                            para.modifyPerson = '冯云威';
                            para.scoreId = this.stuUpdate.scoreId;
                            updateScore(para).then((res) => {
                                this.editLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.$refs['stuUpdate'].resetFields();
                                this.stuUpdateVisible = false;
                                this.getScores();
                            });
                            let para2 = {
                                dissentId: this.updateDissent.dissentId
                            };
                            deleteDissent(para2).then((then) => {
                                this.stuUpdateVisible = false;
                                this.getScores();
                            });
                        });
                    }
                });
            },
            //异议驳回
            stuUpdateRebut: function () {
                this.$refs.stuUpdate.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认驳回吗？', '提示', {}).then(() => {
                            this.stuUpdateVisible = false;
                            let para = {
                                dissentId: this.updateDissent.dissentId
                            };
                            deleteDissent(para).then((then) => {
                                this.getScores();
                            });
                        });
                    }
                });
            },
            //增加提交页面
            stuAddFromSubmit: function () {
                this.$refs.stuAdd.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = {};
                            para.scoreExam = this.stuAdd.scoreExam;
                            para.studentId = this.stuAdd.studentId;
                            para.courseId = this.tableData[0].courseId;
                            addScore(para).then((res) => {
                                this.editLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['stuAdd'].resetFields();
                                this.stuAddVisible = false;
                                this.getScores();
                            });
                        });
                    }
                });
            },


        },
        mounted() {
            this.getScores();
        }

    }
</script>
<style scoped>
    .border-table {
        border-collapse: collapse;
        border: none;
        width: 100%;
    }

    .border-table td {
        border: solid #dfe8ec 1px;
        background: #fff;
        font-size: 14px;
        padding: 6px 6px 6px 12px;
        color: #009966;
        line-height: 28px;
    }

    td.alt {
        background: #EFF2F7;
        color: #8492A6;
    }
</style>